<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <h3>商品详情页</h3>

    <div class="box">
        <h4>商品的名字</h4>
        
    </div>

    <p class="imgs">
        <!-- <img src="产品的图片" alt="">
        <img src="产品的图片" alt=""> -->
    </p>


    <!-- -<input type="text">+ -->
    <button class="addToCart">加入购物车</button>


    <a class="showCart" href="./05cart.html">去结算</a>


    <script src="../js/ajax.js"></script>
    <script>

        // 商品列表进入商品详情页的实现
        //    列表跳转到详情页时携带商品id   直接在地址栏携带    (一般不存cookie)
        //     



        // BOM 回顾     记住地址栏的构造(协议+域名+端口号+pathname+search+hash) ??????????

        const search = location.search ;
        console.log(search);

        const oBox = document.querySelector('.box') ;


        // 这里的id是由商品列表页的跳转实现的
        const id = search.replace('?id=' , '') ;
        console.log(id);

        ajax({
            type : 'get' , 
            data : {
                id
            } ,
            url : '../php/detail.php' ,
            cb : data => {
                console.log(data);

                const {goods_title , goods_price , goods_img , goods_imgSrcs} = data.data ;

                oBox.innerHTML = `
                    <h4>${goods_title}</h4>
                    <p>${goods_price}</p>
                `

                // 动态生成图片
                const imgArr = goods_imgSrcs.split(',');
                console.log(imgArr);
                // ....


            }
        })















        // 加入购物车
        //    新建一张表   谁买了几件什么商品   cart_id   username   num   goods_id

        //    必须判断是否登录


        const oBtn = document.querySelector('.addToCart') ;
        oBtn.onclick = function() {
            // 判断是否登录
            const username = localStorage.getItem('LOGIN_USER') ;
            console.log(username);
            if(username) {
                // 
                ajax({
                    type : 'post' ,
                    url : '../php/addToCart.php' ,
                    data : {
                        username ,
                        id ,
                        num : 1
                    } , 
                    cb : data => {
                        console.log(data);
                    }
                })
            } else {
                
                alert('对不起，请先登录') ;
                // 跳转到登录    把当前页面的地址携带上
                location.href ='./01_login.html?AAAAA=' + location.href ;
            }
        }




    </script>

    
</body>
</html>